import React, {useEffect, useState} from "react";
import {Form, Input, message, Modal, Select} from "antd";
import {FormComponentProps} from "antd/es/form";
import api from '@/services'
import {getAccessToken} from '@/utils/authority';

interface Props extends FormComponentProps {
  data?: any,
  close: Function,
  save: Function
}
// interface State {
//   tenantList: any;
//   screenList: any;
// }
const Save: React.FC<Props> = props => {
  const { form, form: { getFieldDecorator } } = props;
  // const initState: State = {
  //   tenantList: [],
  //   screenList: [],
  // };
  const [tenantList, setTenantList] = useState([]);
  const [screenList, setScreenList] = useState([]);
  const token = getAccessToken();

  const save = () => {
    form.validateFields((err, fileValue) => {
      if (err) return;
      console.log('fileValue',fileValue)
      console.log('tenantList', tenantList)
      if(fileValue.tenantId == 'all'){
        fileValue.tenantName = 'all'
      }else if(fileValue.tenantId == 'admin'){
        fileValue.tenantName = 'admin'
      }else{ 
        for(let i = 0; i < tenantList.length; i++){
          if(tenantList[i].id == fileValue.tenantId){
            fileValue.tenantName = tenantList[i].name
            continue
          }
        }
      }
      api.menu.saveIframe(fileValue).then(res => {
          if (res.status === 200) {
            message.success("保存成功");
            props.save()
          }
      })
    })
  };

  const handleChange = (value: string) => {
    console.log('value',value)
  };

  const handleChangeScreen = (value: string) => {
    console.log('value',value)
  };

  useEffect(() => {
    if(props.data.menuId){
      props.data.screenId = props.data.screenId.split(",")
    }
    console.log('props.data',props.data)
    api.menu.queryNoPaging({}).then(res => {
      if (res.status === 200) {
        setTenantList(res.result);
      }
    })
    api.menu.query({}).then(res => {
      if (res.status === 200) {
        setScreenList(res.result);
      }
    })
  }, []);
  return (
    <Modal
      visible
      title={props.data.menuId ? "编辑对应菜单" : "新增对应菜单"}
      onCancel={() => props.close()}
      onOk={() => {
        save()
      }}
    >
      <Form labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
        <Form.Item key="menuId" label="菜单ID">
          {getFieldDecorator('menuId', {
            rules: [{ required: true, message: '请输入菜单ID' }],
            initialValue: props.data.menuId ? props.data.menuId : ''
          })(<Input placeholder="请输入菜单ID" />)}
        </Form.Item>
        <Form.Item key="menuName" label="菜单名称">
          {getFieldDecorator('menuName', {
            rules: [{ required: true, message: '请输入菜单名称' }],
            initialValue: props.data.menuName ? props.data.menuName : ''
          })(<Input placeholder="请输入菜单名称" />)}
        </Form.Item>
        <Form.Item key="tenantId" label="租户">
          {getFieldDecorator('tenantId', {
            rules: [{required: true, message: '请选择租户'}],
            initialValue: props.data.tenantId ? props.data.tenantId : ''
          })(
          // <Select
          //     placeholder="选择租户"
          //     onChange={handleChange}
          //     options={tenantList}
          //   />
          // mode={itemProps?.mode || 'multiple'}
          <Select placeholder="选择租户" onChange={handleChange}>
              <Select.Option value='all' key='all'>全部</Select.Option>
              <Select.Option value='admin' key='admin'>admin</Select.Option>
              {tenantList.map((item: any) => <Select.Option value={item.id} key={item.id }>{item.name}</Select.Option>)}
          </Select>
          )}
        </Form.Item>
        <Form.Item key="screenIdArr" label="大屏">
          {getFieldDecorator('screenIdArr', {
            rules: [{required: true, message: '请选择大屏'}],
            initialValue: props.data.screenId ? props.data.screenId : []
          })(
          <Select placeholder="选择大屏" mode='multiple' onChange={handleChangeScreen}>
              {screenList.map((item: any) => <Select.Option value={item.id || item} key={item.id || item}>{item.name || item}</Select.Option>)}
          </Select>
          )}
        </Form.Item>
      </Form>
    </Modal>
  )
};
export default Form.create<Props>()(Save);
